/* 
 * 主题配置文件
 * 我们将在这里定义所有主题的 CSS 变量
 */

/* 
 * ========================================================================
 * 默认主题 (Light Theme)
 * 
 * 我们在 :root 中定义全局/亮色主题的变量。
 * 这包括我们自己的自定义变量和需要覆盖的 Element Plus 变量。
 * ========================================================================
 */
:root {
	// --- 自定义变量 ---
	--dawei-backgroud-color: #ffffff;
	--dawei-color-dark-black: #303133;
	--dawei-color-dark-gray: #606266;
	--dawei-header-bg-color: #ffffff;
	--dawei-sidebar-bg-color: #ffffff;

	// --- 覆盖 Element Plus 全局变量 ---
	// 基础色板
	--el-color-primary: #409eff; // 主题色
	--el-color-success: #67c23a;
	--el-color-warning: #e6a23c;
	--el-color-danger: #f56c6c;
	--el-color-info: #909399;

	// 背景颜色
	--el-bg-color: #ffffff;
	--el-bg-color-page: #f2f3f5;
	--el-bg-color-overlay: #ffffff;

	// 边框颜色
	--el-border-color: #dcdfe6;
	--el-border-color-light: #e4e7ed;
	--el-border-color-lighter: #ebeef5;
	--el-border-color-extra-light: #f2f6fc;

	// 填充颜色 (用于 Hover 等)
	--el-fill-color: #f5f7fa;
	--el-fill-color-light: #f5f7fa;
	--el-fill-color-lighter: #fafafa;
	--el-fill-color-blank: #ffffff;
}


/* 
 * ========================================================================
 * 暗黑主题 (Dark Theme)
 * 
 * 使用 Element Plus 官方推荐的 `html.dark` 选择器。
 * 当 <html> 标签有 'dark' 类时，这里的变量会覆盖 :root 中的同名变量。
 * ========================================================================
 */
html.dark {
	// --- 自定义变量 ---
	--dawei-backgroud-color: #141414;
	--dawei-color-dark-black: #e5eaf3;
	--dawei-color-dark-gray: #a3a6ad;
	--dawei-header-bg-color: #1d1d1d;
	--dawei-sidebar-bg-color: #1d1d1d;

	// --- 覆盖 Element Plus 全局变量 ---
	// 基础色板 (可以为暗黑模式定制一套柔和的颜色)
	--el-color-primary: #409eff; 
	--el-color-success: #67c23a;
	--el-color-warning: #e6a23c;
	--el-color-danger: #f56c6c;
	--el-color-info: #909399;

	// 背景颜色
	--el-bg-color: #1d1d1d;
	--el-bg-color-page: #0a0a0a;
	--el-bg-color-overlay: #1d1d1d;

	// 边框颜色
	--el-border-color: #4c4d4f;
	--el-border-color-light: #414243;
	--el-border-color-lighter: #363636;
	--el-border-color-extra-light: #2b2b2c;

	// 填充颜色
	--el-fill-color: #303030;
	--el-fill-color-light: #262727;
	--el-fill-color-lighter: #1d1d1d;
	--el-fill-color-blank: #141414;
}

/* 
 * ========================================================================
 * 示例：新增一个 "薄暮" 主题 (Dusk Theme)
 * 
 * 你可以轻松添加任意数量的主题。
 * 只需要一个新的 `data-theme` 选择器，并覆盖相同的变量即可。
 * ========================================================================
 */
html[data-theme="dusk"] {
    // --- 覆盖 Element Plus 全局变量 ---
    --el-color-primary: #f5a623; // 主题色：橙色
    --el-bg-color: #2c3e50; // 背景：深蓝灰色
    --el-bg-color-page: #22303f;
    --el-text-color-primary: #e0e6ed;
    --el-text-color-regular: #b8c2cc;
    --el-border-color: #4a5d70;
    --el-fill-color-light: #3a4c60;

    // --- 自定义变量 ---
    --dawei-header-bg-color: #2c3e50;
    --dawei-sidebar-bg-color: #2c3e50;
    --dawei-color-dark-black: #e0e6ed;
}

